<template>
	<view class="manContentStyle">
		<read-desk-view style="flex: 1;" v-if="active == 'readDeskView'">
		</read-desk-view>
		<home-view style="flex: 1;" v-if="active == 'home'">
		</home-view>
		<book-case style="flex: 1;" v-if="active == 'bookcase'">
		</book-case>
		<mine-view style="flex: 1;" v-if="active == 'mine'">
		</mine-view>

		<lb-tabbar v-model="active" active-color="#d4237a" inactive-color="#bfbfbf" @change="handleChange">
			<lb-tabbar-item v-for="item in tabbars" :key="item.name" :name="item.name"
				:icon="active === item.name ? item.iconActive : item.icon" :text="item.text" :dot="item.dot"
				:info="item.info" :raisede="item.raisede">
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>

<script>
	import readDeskView from '../baseBusiness/readDesk/index.vue'
	import homeView from '../baseBusiness/home/homeView.vue'
	import bookCase from '../baseBusiness/bookcase/bookcaseView.vue'
	import mineView from '../baseBusiness/mine/mineView.vue'
	export default {
		data() {
			return {
				active: 'readDeskView',
				tabbars: []
			}
		},
		components: {
			readDeskView,
			homeView,
			bookCase,
			mineView
		},
		onLoad(options) {
			if (options.tabName != undefined) {
				this.active = options.tabName
			}
		},
		created() {
			let that = this;
			uni.onLocaleChange(async (e) => {
				await uni.setLocale(e.locale);
				that.initDataInfo();
			})
			that.initDataInfo();
		},
		methods: {
			initDataInfo() {
				let that = this;
				let dataInfo = [{
						name: 'readDeskView',
						text: that.$t('index.tab.home'),
						icon: '/static/tabBar/read-Desk.png',
						iconActive: '/static/tabBar/read-Desk-active.png',
						dot: false
					},
					{
						name: 'home',
						text: that.$t('index.tab.book-city'),
						icon: '/static/tabBar/home.png',
						iconActive: '/static/tabBar/home-active.png',
						dot: false
					},
					{
						name: 'bookcase',
						text: that.$t('index.tab.book-case'),
						icon: '/static/tabBar/bookcase.png',
						iconActive: '/static/tabBar/bookcase-active.png',
					},
					{
						name: 'mine',
						text: that.$t('index.tab.mine'),
						icon: 'mine',
						icon: '/static/tabBar/mine.png',
						iconActive: '/static/tabBar/mine-active.png',
					}
				];
				that.tabbars = JSON.parse(JSON.stringify(dataInfo));
			},
			handleChange(e) {

			}
		}
	}
</script>

<style>
	.manContentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
		/* position: absolute; */
		background-color: #f8f9fa;
		position: fixed;
	}
</style>